<template>
  <div class="account-edit addButton">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>组织管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/authority/systemUser/list' }">用户帐号管理</el-breadcrumb-item>
      <el-breadcrumb-item>帐号修改</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="form">
      <el-form ref="form" :model="form" label-width="130px" size="small" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入用户姓名" size="small" style="width:230px"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入用户手机号" size="small" style="width:230px"></el-input>
        </el-form-item>
        <el-form-item label="用户角色" prop="identity">
          <el-radio-group v-model="form.identity" @change="identityChange">
            <el-radio :label="0">管理员</el-radio>
            <el-radio :label="1">学生</el-radio>
            <el-radio :label="2">教师</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色权限" prop="roleId" v-show="form.identity!==1">
          <el-select v-model="form.roleId" placeholder="选择角色" style="width:230px">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.name"
              :disabled="item.id===2"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="班级" v-show="form.identity===1">
          <el-select v-model="form.classId" placeholder="选择角色" style="width:230px">
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号" prop="identityCard">
          <el-input v-model="form.identityCard" placeholder="" size="small" style="width:230px"></el-input>
        </el-form-item>
        <el-form-item label="现居住地" prop="address">
          <el-input v-model="form.address" placeholder="" size="small" style="width:230px"></el-input>
        </el-form-item>
        <el-form-item label="身份证所在地" prop="idEntityCardAddress">
          <el-input v-model="form.idEntityCardAddress" placeholder="" size="small" style="width:230px"></el-input>
        </el-form-item>
        <el-form-item :label="form.identity===1?'入学时间':'入职时间'" prop="admissionTime">
          <el-date-picker
            style="width:230px"
            v-model="form.admissionTime"
            type="datetime"
            value-format="timestamp"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button style="background:#fb9654;color:#fff" @click="onSubmit" :disabled="isDisabled">修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>
<script>
export default {
  mounted() {

    this.form.id = this.$route.query.id;
    this.getUserDetail();
    this.getClassList();
    this.getRoleList();
  },
  data() {
    return {
      form: {
        id: "", //用户id
        name: "", //用户名
        phone: "", //手机号
        identity: 0, //用户身份  0:管理员 / 1:学生 /2:老师
        roleId: "", //角色id
        classId: "", //用户班级id
        oldClassId: "", // 旧班级id
        identityCard: "", //用户身份证号
        idEntityCardAddress: "", //用户身份证地址
        address: "", //现居住地址
        admissionTime: "", //入学时间
        sex: 1 //性别 1/2 男/女
      },
      rules: {
        name: [{ required: true, message: "不能为空", trigger: "change" }],  //, //用户名
        phone: [{ required: true, message: "不能为空", trigger: "change" }],  //, //手机号
        identity: [{ required: true, message: "不能为空", trigger: "change" }],  //0, //用户身份  0:管理员 / 1:学生 /2:老师
        roleId: [{ required: true, message: "不能为空", trigger: "change" }],  //, //角色id
        identityCard: [{ required: true, message: "不能为空", trigger: "change" }],  //, //用户身份证号
        idEntityCardAddress: [{ required: true, message: "不能为空", trigger: "change" }],  //, //用户身份证地址
        address: [{ required: true, message: "不能为空", trigger: "change" }],  //, //现居住地址
        admissionTime: [{ required: true, message: "不能为空", trigger: "change" }],  //, //入学时间
        sex: [{ required: true, message: "不能为空", trigger: "change" }],  //1 //性别 1/2 男/女
      },
      roleList: [],
      classList: [],
      isDisabled: false,
    };
  },
  methods: {
    getUserDetail() {
      this.$api.authority.getUserDetail({ id: this.form.id })
        .then((res) => {
          let data = res.data;
          this.form.id = data.id;     //用户id
          this.form.name = data.name;     //用户名
          this.form.phone = data.phone;     //手机号
          this.form.identity = Number(data.identity); //用户身份  0:管理员 / 1:学生 /2:老师
          this.form.roleId = data.roleId;     //角色id
          this.form.oldClassId = data.classId;     //旧班级id
          this.form.classId = data.classId;     //用户班级id
          this.form.identityCard = data.identityCard;     //用户身份证号
          this.form.idEntityCardAddress = data.identityCardAddress;     //用户身份证地址
          this.form.address = data.address;     //现居住地址
          this.form.admissionTime = data.admissionTime;     //入学时间
          this.form.sex = data.sex;     //性别 1/2 男/女
          console.log(res.data);
        });
    },
    identityChange(v) {
      console.log(arguments);
      if (v === 1) {
        this.form.roleId = 2;
      } else {
        this.form.roleId = "";
      }
    },
    //角色列表
    getRoleList() {
      let params = {
        pageSize: 100,
        pageNum: 1
      };
      this.$api.authority.getRoleList(params)
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            let data = res.data;
            this.roleList = data.list;
          }
        });
    },
    // 班级列表
    getClassList() {
      let params = {
        pageNum: 1,
        pageSize: 100,
        name: ""
      };
      this.$api.education.classList(params)
        .then((res) => {
          if (res.code === 200) {
            this.classList = res.data.list;
          }
        });
    },
    //修改提交
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$api.authority.userAccountUpdate(this.form)
            .then((res) => {
              this.$message.success("修改成功");
            });
        }
      });
    }
  },

};
</script>
<style lang="scss">
.account-edit {
  padding: 30px;

  .form {
    max-width: 700px;
    margin: 30px 0px;
  }
}
</style>

